<template>
    <view style="height: 100%">
        <!-- pages/first/first.wxml -->
        <l-search-bar placeholder="搜索:请输入公司/职位/时间/地点/联系人" />
        <view class="bottons">
            <button size="mini">全部</button>
            <button size="mini">求实习</button>
            <button size="mini">招聘</button>
            <button size="mini">问答</button>
        </view>
        <view class="all">
            <view class="container">
                <image src="/static/photo/03-2.png"></image>
                <view class="comp">
                    <text class="compname">公司：{{ companyInfo.companyname }}</text>
                    <text>职位{{ companyInfo.position }}</text>
                    <text>公司简介：{{ companyInfo.info }}</text>
                </view>
            </view>
            <form @submit.stop.prevent="formSubmit" @reset.stop.prevent="formReset" @submit="firstSubmit">
                <view class="que">
                    <text font-size="28rpx" font-weight="800">提问</text>
                    <textarea placeholder="请输入您的问题" name="yourQues"></textarea>
                </view>
                <view class="que">
                    <text font-size="28rpx" font-weight="800">实习</text>
                    <textarea placeholder="期待的岗位/工资/时间" name="expectation"></textarea>
                </view>
                <view class="btn-area">
                    <button style="margin: 30rpx 0" type="primary" formType="submit">Submit</button>
                    <button style="margin: 30rpx 0" formType="reset">Reset</button>
                </view>
            </form>
        </view>
    </view>
</template>

<script>
import lSearchBar from '@/miniprogram_npm/lin-ui/search-bar/index';
import lInput from '@/miniprogram_npm/lin-ui/input/index';
// pages/first/first.js
import { companyInfo } from '../../data/data';
export default {
    data() {
        return {
            companyInfo: {
                companyname: '',
                position: '',
                info: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.setData({
            companyInfo
        });
        console.log(companyInfo);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        formSubmit(e) {
            console.log('form发生了submit事件，携带数据为：', e.detail.value);
        },

        formReset(e) {
            console.log('form发生了reset事件，携带数据为：', e.detail.value);
            this.setData({
                chosen: ''
            });
        },

        firstSubmit: function (e) {
            this.setData({
                yourQues: e.detail.value.yourQues,
                expectation: e.detail.value.expectation
            });
        }
    }
};
</script>
<style>
/* pages/first/first.wxss */
.bottons {
    display: flex;
    flex-direction: row;
    margin: 10rpx 10rpx 20rpx 10rpx;
    align-items: center;
}
.all {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.container {
    display: flex;
    flex-direction: row;
    /* 上下边线 */
    border-top: 2rpx solid #b8b5b5;
    border-bottom: 2rpx solid #b8b5b5;
    padding-top: 10rpx;
    padding-bottom: 10rpx;
    width: 700rpx;
    height: auto;
    margin-top: 20rpx;
    margin: 20rpx, 10rpx, 20rpx, 10rpx;
    align-items: left;
    justify-content: center;
}
image {
    width: 260rpx;
    height: 200rpx;
    margin-left: 10rpx;
}
.comp {
    display: flex;
    flex-direction: column;
    margin-left: 10rpx;
    width: 400rpx;
    height: auto;
}
.que {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 上下边线 */
    border-top: 2rpx solid #b8b5b5;
    border-bottom: 2rpx solid #b8b5b5;
    padding-top: 10rpx;
    padding-bottom: 10rpx;
    width: 700rpx;
    height: 250rpx;
    margin-top: 20rpx;
    margin: 20rpx, 10rpx, 20rpx, 10rpx;
}
.compname {
    font-size: '32rpx';
    font-weight: '800';
}
.btn-area {
    display: flex;
    flex-direction: row;
}
</style>
